import React from 'react';
import { View, Image } from 'react-native';
import { Lt, Color, Label, Jpp, Jx, Cimage, Fimage, Dialog, Touch, Images } from "../_utils";

const iwh = 40;
const cinv = 5;
const ci2 = (Jpp.width - iwh - Lt.margin * 3 - cinv * 2)/2;
const ci3 = (Jpp.width - iwh - Lt.margin * 3 - cinv * 3)/3;
export class ViewImages extends React.PureComponent{
    render(){
        const {images, hiden, onAlbum} = this.props;
        const len = images.length;
        const ii = (len >= 3) ? ci3 : ci2;
        const is1 = len == 1;
        let uris = images;
        if(hiden){
            uris = [];
            for(let k = 0; k < 3 && k < len; ++k){
                uris.push(images[k]);
            }
        }
        return <View>
        {
            (is1 && !hiden) ? <Touch onPress={()=>{onAlbum && onAlbum(0)}}>
                <Cimage uri={uris[0]} style={{width:Jpp.width/2, height:Jpp.width*4/5}} />
            </Touch> : 
            <View style={{flexDirection:"row", flexWrap:"wrap"}}>
            {
                uris.map((uri, k)=>{
                    return <Touch key={k} onPress={()=>{onAlbum && onAlbum(k)}}>
                        <Cimage uri={uri} style={{width:ii, height:ii,marginRight:cinv, marginBottom:cinv}}/>
                    </Touch>
                })
            }
            </View>  
        }
        </View>
    }
}

export class TouchHiden extends React.PureComponent{
    constructor(props){
        super(props);
        this.state = {
            hiden : true,
        }
        this.hiden = true;
        this.onHiden = this.onHiden.bind(this);
    }
    onHiden(){
        let hiden = !this.hiden;
        this.hiden = hiden;
        this.setState({hiden});
        const {onHiden} = this.props;
        onHiden && onHiden(hiden);
    }
    render(){
        return <Touch onPress={this.onHiden} style={{alignSelf:"flex-end", padding:Lt.pad}}>
            <Label style={{fontSize:Lt.c16, color:Color.theme}}>{this.state.hiden ? "查看详情" : "  收起  "}</Label>
        </Touch>
    }
}
export class LabelContent extends React.PureComponent{
    render(){
        const {children, hiden} = this.props;
        const style = {marginVertical:Lt.margin, color:Color.c6};
        if(hiden){
            return <Label style = {style} numberOfLines={2} ellipsizeMode={"tail"}>{children}</Label>
        }
        return <Label style = {style}>{children}</Label>
    }
}

export class ViewMoment extends React.PureComponent{
    render(){
        const { source, title, date, onPress, children} = this.props;
        const iwh = 40, inv = 5;
        return <View style = {{backgroundColor:"white", flexDirection:"row", padding:Lt.pad, marginBottom:Lt.margin}}>
            <Fimage style={{width:iwh, height:iwh}} uri = {source} />
            <View style = {{marginLeft:Lt.margin, flex:1}}>
                <View style={{flexDirection:"row", justifyContent:"space-between", alignItems:"center", width:Jpp.width - iwh - Lt.margin * 3}}>
                    <View style={{flexShrink:1}}>
                        <Label style = {{fontSize:Lt.c16, color:Color.c3}}>{title}</Label>
                        <Label style = {{color:Color.c9, marginVertical:5}}>{Jx.toDate(date)}</Label>
                    </View>
                    {/* <Touch style={{padding:Lt.pad, alignSelf:"flex-start"}} onPress={onPress}>
                        <Image source={Images.fenxiang_tg}/>
                    </Touch> */}
                </View>
                { children }
            </View>
        </View>
    }
}


export class ViewMoments extends React.PureComponent{
    constructor(props){
        super(props);
        this.state = {
            hiden : true,
        }
    }
    render(){
        const { source, title, date, onPress, content, images} = this.props;
        const { hiden } = this.state;
        return <ViewMoment
            source = {source}
            title = {title}
            date = {date}
            onPress = {onPress}
        >
            <LabelContent hiden={hiden}>{content}</LabelContent>
            <ViewImages hiden={hiden} images={images}/>
            <TouchHiden onHiden={hiden=>this.setState({hiden})}/>
        </ViewMoment>;
    }
}

